<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
            <title>Cindy JS</title>
            <script type="text/javascript" src="../build/js/Cindy.js"></script>
            <link rel="stylesheet" href="../css/cindy.css">


            </head>

	<body style="font-family:Arial;">

        <h1>Fish Swarm</h1>


               <script id='init' type='text/x-cindyscript'>
      sizes=apply(allmasses(),random()*.6+.5);
      colors=apply(allmasses(),random());

        </script>

<script id='csmove' type='text/x-cindyscript'>

pts=allmasses();

n=10;
s=sum(pts,#.xy);
forall(pts,p,
  sorted=sort(pts,abs(p.xy-#.xy));
  pmid=sum(2..(n+1),(sorted_#).xy)/n;
  vmid=sum(2..(n+1),(sorted_#).v)/n;
  vd=(pmid-p.xy);
  middir=((0,0)-p.xy);

  v=p.v+vd*.1 +vmid*.01+0.01*middir;

//  p.color=hue(abs(v)/6);

  if(abs(v)>3,v=3*v/abs(v));
  p.v=v;
);

nn=length(pts);
forall(1..nn,p=pts_#;
ang=arctan2(p.vx,-p.vy);
drawimage(p,"fishr",angle->ang,scale->sizes_#,alpha->colors_#);
drawimage(p,"fishb",angle->ang,scale->sizes_#,alpha->1-colors_#);


);
//X.xy=[4,3];
//Y.xy=[-5,4];
//Z.xy=[5,-4];

        </script>


        <div  id="CSCanvas" style="width:500px; height:500px; border:2px solid #000000"></div>


        <script type="text/javascript">
            nn=40;
            b=10;
            var gslp=[
                      {name:"B", type:"Free", pos:[-b,b],color:[0,0,0],size:3},
                      {name:"C", type:"Free", pos:[-b,-b],color:[0,0,0],size:3},
                      {name:"D", type:"Free", pos:[b,-b],color:[0,0,0],size:3},
                      {name:"E", type:"Free", pos:[b,b],color:[0,0,0],size:3},

                      {name:"a", type:"Segment", args:["B","C"],color:[0,0,0],size:1 },
                      {name:"b", type:"Segment", args:["C","D"],color:[0,0,0],size:1 },
                      {name:"c", type:"Segment", args:["D","E"],color:[0,0,0],size:1 },
                      {name:"d", type:"Segment", args:["E","B"],color:[0,0,0],size:1 }



                    ];

    for(var i=0;i<nn;i++){
    gslp.push(
              {name:"A"+i, type:"Free",
              pos:[(Math.random()-.5)*14,(Math.random()-.5)*14],
              color:[1,.5,.5],size:.1}
              )

};
            var physics=[
                       {behavior:{type:"Environment",gravity:0,
                       accuracy:10,deltat:0.1,
                       balls:false,charges:true,friction:0}},

                       {name:"a", behavior:{type:"Bouncer"}},
                       {name:"b", behavior:{type:"Bouncer"}},
                       {name:"c", behavior:{type:"Bouncer"}},
                       {name:"d", behavior:{type:"Bouncer"}},
                       ];


for(var i=0;i<nn;i++){
    physics.push(
              {name:"A"+i, behavior:{
              type:"Mass",
              vx:Math.random()-.5,
              vy:Math.random()-.5,
              charge:1},
              }
              )

};
            var cdy = CindyJS({canvasname:"CSCanvas",
                        defaultAppearance: {dimDependent: 0.7},
                        movescript:"csmove",
                        initscript:"init",
                        geometry:gslp,
                        behavior:physics,
                        images:{fishr:"fish/fishr.png",fishb:"fish/fishb.png"}

                        }
                        );

        </script>

        <button onclick="cdy.play()" type="button" style="position:absolute; top:610px;left:60px" >Play</button>
        <button onclick="cdy.pause()" type="button" style="position:absolute; top:610px;left:110px" >Pause</button>
        <button onclick="cdy.stop()" type="button" style="position:absolute; top:610px;left:170px" >Stop</button>

	</body>
</html>
